<template>
	<view class="content" :style="{ height: systemInfo.windowHeight + 'px' }">
		<!-- 除tabs的上面部分 -->
		<view class="top-area" :style="{ paddingTop: systemInfo.statusBarHeight + 'px' }">

			<!-- 公司名称 -->
			<view class="choose">
				<view class="select">
					<!-- {{userInfo.companyAccountName}} -->
					<view class="com-title">舟山港务有限公司</view>



					<view class="title">
						{{ userInfo.nickName }}，
						<text class="title-txt1">欢迎您</text>
						<!-- <text class="title-txt2">！</text> -->
					</view>
				</view>

			</view>
			<!-- 跳转页面的模块 -->
			<ul class="module">
				<!-- 安全目标 -->
				<li v-if="checkPermi(['system:letter:page:distribute', 'system:letter:page:sign'])">
					<navigator :url="'/pages/safetyTarget/index'">
						<image class="module-img" src="@/static/images/index/safe-new.png"></image>
						<view class="module-name"> 安全责任 </view>
					</navigator>
				</li>
				<!-- 特殊作业 -->
				<li v-if="checkPermi(['system:master:list', 'system:master:order:list', 'system:master:statistics'])">
					<navigator :url="'/pages/specialWork/index'">
						<image class="module-img" src="@/static/images/index/special-new.png"></image>
						<view class="module-name"> 特殊作业 </view>
					</navigator>
				</li>
				<!-- 隐患管理 -->
				<li v-if="checkPermi(['system:rectification:list', 'system:troubleRect:list', 'system:allShoot:list'])">
					<navigator :url="'/pages/trouble/index'">
						<image class="module-img" src="@/static/images/index/hidden-new.png"></image>
						<view class="module-name"> 隐患管理 </view>
					</navigator>
				</li>
				<!-- 劳保管理 -->
				<li v-if="checkPermi(['system:materials:list', 'system:person:list'])">
					<navigator :url="'/pages/laobao/index'">
						<image class="module-img" src="@/static/images/index/laobao-new.png"></image>
						<view class="module-name"> 劳保管理 </view>
					</navigator>
				</li>
			</ul>
		</view>
		<view class="tabs">
			<view class="new-todo">
				<uni-badge class="uni-badge-left-margin" :text="todoNum" absolute="rightTop" :offset="[-3, 15]"
					size="small">
					<view class="box"><text class="box-text">最新待办</text></view>
				</uni-badge>
				<!-- 最新待办 -->
			</view>
			<view class="new-all" @click="goto">
				<!-- 查看全部 -->
			</view>

		</view>
		<view class="page-content">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
				<view class="list-item" v-for="item in dataList" :key="item.id" @click="itemClick(item)">
					<view class="left-img">
						<image class="img" src="../static/images/wait/special.png"></image>
					</view>
					<view class="right">
						<view class="right-top">
							<view class="item-title">{{item.title}}</view>
							<view class="item-time">{{item.createdAt}}</view>
						</view>
						<view class='right-bottom'>
							{{item.content}}。
						</view>
					</view>
					<view class="arrow">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
			</z-paging>
		</view>


	</view>
</template>

<script>
	import {
		getTodo
	} from "@/api/home/index.js";
	import CustomRefresher from "../components/custom-refresher/custom-refresher.vue"
	import CustomNoMore from "../components/custom-nomore/custom-nomore.vue"
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数

	export default {
		components: {
			CustomRefresher,
			CustomNoMore
		},
		mixins: [],
		data() {
			return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				systemInfo: {},
				userInfo: {}, //用户信息
				queryForm: {
					pageNum: 1,
					pageSize: 5
				},
				todoNum: 0,
				agencyList: []
			};
		},
		onLoad: function() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// 系统信息,存储数据
					uni.setStorageSync("systemInfo", res);
					that.systemInfo = res;
					console.log(res, "设备高度");
				},
			});
			// 获取用户信息
			this.userInfo = uni.getStorageSync("userInfo");
		},
		methods: {
			checkPermi,
			async getTodoList() {
				let res = await getTodo(this.queryForm)
				this.dataList = res.rows
				this.todoNum = res.total
			},
			queryList(pageNum, pageSize) {
				console.log("进来了", pageNum, pageSize)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，请在网络请求回调中
				//通过this.$refs.paging.complete(请求回来的数组);将请求结果传给z-paging
				let query = {
					pageNum,
					pageSize
				}
				getTodo(query).then((res) => {
					// 将请求的结果数组传递给z-paging
					this.$refs.paging.complete(res.rows);
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			
			},
			//点击待办跳转
			itemClick(item) {
				// console.log('点击了', item.appUrl);
				if (item.appUrl !== '' && item.appUrl !== null) {
					uni.navigateTo({
						url: `/${item.appUrl}`
					})
				}


			},

			//获取待办列表
			async getList() {
				uni.showLoading({
					title: "加载中..."
				})
				let res = await getTodo(this.queryForm);
				this.agencyList = res.rows;
				uni.hideLoading()
			},

		},
		mounted() {
			// this.getList()
			this.getTodoList()
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fbfbfb;

		.top-area {
			padding: 0 32rpx;
			width: 100%;
			height: 435rpx;
			// background: linear-gradient(
			//   to right,
			//   rgba(175, 250, 245, 0.4) 40%,
			//   rgba(160, 230, 250, 0.4) 80%
			// );
			background-image: url("@/static/images/index/index-back.png");
			background-size: 100% 100%;

			.title {
				height: 92rpx;
				font-size: 36rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 92rpx;
				color: rgba(34, 34, 34, 1);
				margin-bottom: 26rpx;


			}

			.choose {
				height: 150rpx;
				margin-bottom: 70rpx;
				padding-top: 30%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.select {
					height: 132rpx;

					.com-title {
						text-align: left;
						font-weight: 500;
						font-size: 28rpx;
						color: #17233D;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}

					.title {

						font-weight: 500;
						font-size: 24rpx;
						color: #17233D;
					}

				}

				.img {
					width: 288rpx;
					height: 70.66rpx;
				}
			}

			.module {
				padding: 0;
				margin: 0;
				position: relative;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				height: 244rpx;
				border-radius: 16rpx;
				background-color: #fff;

				border: 3rpx solid rgba(255, 255, 255, 1);

				li {
					list-style: none;

					.module-img {
						width: 96rpx;
						height: 96rpx;
					}

					.module-name {
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}

		.tabs {
			position: relative;
			top: 96rpx;
			height: 96rpx;
			line-height: 96rpx;
			display: flex;
			padding: 0 24rpx;
			justify-content: space-between;

			.new-todo {
				color: #17233D;
				font-weight: 600;
				font-size: 28rpx;
			}

			.new-all {
				color: #808695;
				font-weight: 400;
				font-size: 24rpx;
			}
		}

		.page-content {
			position: relative;
			top: 80rpx;
			height: 880rpx;
			padding: 24rpx;
			overflow: auto;

			.list-item {
				height: 162rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #E8EAEC;
				display: flex;
				align-items: center;

				.left-img {
					.img {
						margin-left: 20rpx;
						height: 80rpx;
						width: 80rpx;
					}
				}

				.right {
					width: 510rpx;
					overflow: hidden;
					margin: 0 20rpx;

					.right-top {
						display: flex;
						justify-content: space-between;

						.item-title {
							font-weight: 400;
							font-size: 26rpx;
							color: #17233D;
						}

						.item-time {
							font-weight: 400;
							font-size: 20rpx;
							color: #808695;
						}
					}

					.right-bottom {
						margin-top: 12rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #808695;
					}
				}
			}



			.item {
				position: relative;
				height: 150rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				// padding: 0rpx 30rpx;
			}

			// .item-line {
			// 	position: absolute;
			// 	bottom: 0rpx;
			// 	left: 0rpx;
			// 	height: 1px;
			// 	width: 100%;
			// 	background-color: #eeeeee;
			// }

			::v-deep {
				.zp-paging-container-content {
					height: 860rpx;
					top: 600rpx;
					overflow: auto;
				}
			}
		}

		.uni-list {
			width: 100%;
		}

	}
</style>